import React,{useState} from 'react'
import { useAuth } from "../context/AuthProvider";
import { login } from '../api/user'
import { message,Button, Form, Input } from 'antd';
import { Link } from "react-router-dom";

const Login = ()=>{
    const { setUser } = useAuth();
    const [loading,setLoading] = useState(false);
    const handleLogin = (values)=>{
        login(values)
            .then(res=>{
                console.log(res)
                if(res.code === '200'){
                    message.success("登录成功！")
                    setUser(res.data)    
                }
            })
            .catch(err=>{
                message.error("登录失败")
                console.log(err)
            })
            .finally(()=>{
                setLoading(false)
            })
    }
    return <div>
            <Form
                name="basic"
                layout='vertical'
                style={{margin:'50px auto',width: 400}}
                onFinish={handleLogin}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="userName"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    hasFeedback
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                <Input.Password />
                </Form.Item>

                <Form.Item>
                    <Button block shape='round' type="primary" htmlType="登录" loading={loading}>
                        登录
                    </Button>
                </Form.Item>
            </Form>
    </div>
}
export default Login;